<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"
    />
    <link rel="shortcut icon" href="/static/admin/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/static/admin/css/font.css">
    <link rel="stylesheet" href="/static/admin/css/xadmin.css">

    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="/static/admin/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/admin/js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .layui-form input[type=checkbox] {
            display: block; 
        }
        .chcBox_Width {
            width: 18px;
            height:18px;
            z-index: 10000;
            background-color: red;
        }

        .li_width {
            width: 150px;
        }

        .li_width1 {
            width: 150px;
        }

        .guige_ul {
            padding-left: 20px;
            background-color: #F8F8F8;
        }

        .table_head {
            line-height: 23px;
            margin-left: 20px;
        }
        .Father_Item0>li {
            float: left;

        }

        .Father_Item1>li {
            float: left;

        }
       .layui-form-checkbox {
            display: none;
        }

        #demo2 img {
            border: 1px solid red;
            width:200px;
            height:200px;
        }
    </style>
</head>

<body>
    <div class="x-body">
        <div class="layui-container">
            <form action="/admin/goods/save" class="layui-form" method="POST" enctype="multipart/form-data">
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        <span class="x-red">*</span>选择类目
                    </label>
                    <div class="layui-input-inline">
                        <select name="type1_id" lay-filter="type1_id">
                            <option value="">选择一级分类</option>
                            {volist name='type' id='vo'}
                            <option value="{$vo.id}">{$vo.name}</option>
                            {/volist}
                        </select>
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        <span class="x-red">*</span>商品所属一级类目
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        <span class="x-red">*</span>选择类目
                    </label>
                    <div class="layui-input-inline">
                        <select name="type2_id" lay-verify="required" id="type2_id" lay-filter="type2_id">
                            <option value="">选择二级分类</option>
                        </select>
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        <span class="x-red">*</span>商品所属二级类目
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">
                        <span class="x-red">*</span>选择类目
                    </label>
                    <div class="layui-input-inline">
                        <select name="type3_id" lay-verify="required" id="type3_id" lay-filter="type3_id">
                            <option value="">选择三级分类</option>
                        </select>
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        <span class="x-red">*</span>商品叶子类目
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        <span class="x-red">*</span>选择品牌
                    </label>
                    <div class="layui-input-inline">
                        <select name="brand_id" lay-filter="brand_id" id="brand_id">
                            <option value="">选择品牌</option>
                        </select>
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        <span class="x-red">*</span>商品商品品牌
                    </div>
                </div>
                <div class="layui-row" id="attr">

                </div>
                <div class="layui-upload">
                    <label for="imggg" type="button" class="layui-btn" id="test1">商品封面图上传</label> 
                    <input type="file" id="imggg" name="img" onchange="addImg(this)" style="display: none;">
                    <div  style="margin-top:20px;"></div>
                    预览图：
                    
                    <div id="img" style="margin-top:20px;">
                        
                    </div>
                </div>   
                <div class="layui-form-item">
                    <label class="layui-form-label"> <span class="x-red">*</span>商品标题</label>
                    <div class="layui-input-block">
                        <input type="text" name="goods_name" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
                    </div>
                </div>
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                        <legend>上传5张主图</legend>
                </fieldset>
                       
                <div class="layui-upload">
                    <label for="image" type="button" class="layui-btn" id="test2">多图片上传</label> 
                    <input type="file" id="image" name="image[]" onchange="addIamge(this)" multiple  style="display: none;">
                    <div  style="margin-top:20px;"></div>
                    预览图：
                   
                    <div id="demo2" style="margin-top:20px;">
                      
                    </div>
                </div>
                    
                <div class="layui-form-item" id="sku">
                    
                </div>
                <div class="Add_p_s" style="margin-bottom:20px;">
                    <label class="form-label col-2">一口价格：</label>
                    <div class="formControls col-2"><input type="text" class="input-text" value="" placeholder="" id="" name="spu_price">元</div>
                </div> 
                <textarea id="demo" name="content"></textarea>
                <div class="layui-form-item">
                    <label for="L_repass" class="layui-form-label">
                    </label>
                    <button class="layui-btn layui-btn-danger" lay-filter="add" id="sub_btn">
                        添加商品
                    </button>
                </div>
            </form>
        </div>
    </div>
    <script>

        layui.use('form', function () {
            var form = layui.form;

            //各种基于事件的操作，下面会有进一步介绍
            form.on('select(type1_id)', function (data) {
                console.log(data)
                console.log(data.value); //得到被选中的值
                var id = data.value;
                $("#type3_id").html('<option value="">请选择三级分类</option>');
                if (id != "") {
                    $.ajax({
                        type: "GET",
                        url: "/admin/goods/ajax_get_type?id=" + id,
                        dataType: "json",
                        success: function (data) {
                            console.log(data);
                            var str = '<option value="">请选择二级分类</option>';
                            for (var i = 0; i < data.length; i++) {
                                str += '<option value="' + data[i].id + '">' + data[i].name + '</option>';
                            }
                            // 把拼好的 option 放到第二个下拉框中
                            $("#type2_id").html(str);

                            form.render('select');
                        }
                    });
                }

            });
            form.on('select(type2_id)', function (data) {
                console.log(data.value);
                var id = data.value;
                if (id != "") {
                    $.ajax({
                        type: "GET",
                        url: "/admin/goods/ajax_get_type?id=" + id,
                        dataType: "json",
                        success: function (data) {
                            console.log(data);
                            var str = '<option value="">请选择三级分类</option>';
                            for (var i = 0; i < data.length; i++) {
                                str += '<option value="' + data[i].id + '">' + data[i].name + '</option>';
                            }
                            // 把拼好的 option 放到第三个下拉框中
                            $("#type3_id").html(str);
                            form.render('select');
                        }
                    });
                }

            });
            form.on('select(type3_id)', function (data) {
                console.log(data.value);
                var id = data.value;
                if (id != "") {
                    $.get("/admin/attr/ajax_get_attr/id/" + id, function (data) {
                        // console.log('这里是返回的数据',data);
                        $("#attr").html(data);
                        form.render('select');
                    }
                    );
                    $.get("/admin/sku/ajax_get_sku/id/" + id, function (data) {
                        // console.log('这里是返回的数据',data);
                        $("#sku").html(data);
                        form.render('select');
                    }
                    );
                    $.get("/admin/brand/ajax_get_brand?id=" + id, function (data) {
                        // console.log(data);
                        var str = '<option value="">请选择商品品牌</option>';
                        for (var i = 0; i < data.length; i++) {
                            str += '<option value="' + data[i].id + '">' + data[i].brand_name + '</option>';
                        }
                        // 把拼好的 option 放到第三个下拉框中
                        $("#brand_id").html(str);
                        form.render();
                    }
                    );
                }

            });
        });


    </script>
    <script>
        // { if session('status') != null}
        // alert('添加成功');
        // parent.location.href = '/admin/brand/index';

        // {/if}


        function addIamge(obj){
            console.log(obj.files.length);
            
            if(obj.files.length>5){
                alert('图片过多');
                location.href = '/admin/goods/add';
            }

            for(i=0;i<obj.files.length;i++){
                var file = obj.files[i];
                
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload=function(e){
                //的base64编码格式的地址
                    $('#demo2').append($('<img>').attr('src',e.target.result))
                }

            }
        }
        function addImg(obj){
          

            for(i=0;i<obj.files.length;i++){
                var file = obj.files[i];
                
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload=function(e){
                //的base64编码格式的地址
                    $('#img').append($('<img>').attr('src',e.target.result))
                }

            }
        }
       

        layui.use('layedit', function(){
            var layedit = layui.layedit;
            layedit.set({
            uploadImage: {
                url: '/admin/goods/images' //接口url
                ,type: 'post' //默认post
                }
            });
            layedit.build('demo',{
                tool: ['strong','italic','underline','del','link','image','left', 'center', 'right', '|', 'face']
            }); //建立编辑器
        });
       
    </script>
  

</body>

</html>